<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="设备品牌" prop="gasBrand">
        <el-input
          v-model="queryParams.gasBrand"
          placeholder="请输入设备品牌"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设备型号" prop="gasModel">
        <el-input
          v-model="queryParams.gasModel"
          placeholder="请输入设备型号"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="gasState">
        <el-select
          v-model="queryParams.gasState"
          placeholder="设备状态"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in dict.type.hmy_gas_state"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="dateRange"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row style="margin-right: 80px">
      <el-col :span="5" v-for="(o, index) in this.gasList" :key="o" :offset=1 style="margin-top: 20px">
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
          <div style="padding: 14px;">
            <span>{{o.gasBrand}}</span>
            <div class="bottom clearfix">
              <time class="time">{{ currentDate }}</time>
              <el-button type="primary" class="button" size="mini" @click="handleUpdate(o.gasId)">修改</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>




    <!-- 添加或修改岗位对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form"  label-width="80px">
        <el-form-item label="设备品牌" prop="gasBrand">
          <el-input v-model="form.gasBrand" placeholder="请输入设备品牌" />
        </el-form-item>
        <el-form-item label="设备型号" prop="gasModel">
          <el-input v-model="form.gasModel" placeholder="请输入设备型号" />
        </el-form-item>
        <el-form-item label="设备类型" prop="gasType">
          <el-select
            v-model="form.gasType"
            placeholder="设备类型"
            clearable
            style="width: 240px"
          >
            <el-option
              v-for="dict in dict.type.hmy_gas_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="检测范围" prop="gasRange">
          <el-input v-model="form.gasRange" placeholder="请输入检测范围"/>
        </el-form-item>
        <el-form-item label="设备状态" prop="gasState">
          <el-radio-group v-model="form.gasState">
            <el-radio
              v-for="dict in dict.type.hmy_gas_state"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>


</template>

<script>
    import { listGas,addGas,editGas,delGas,listGasById } from "@/api/hmy/gas"

    export default {
      name: "yyhtest",
      dicts: ['hmy_gas_state','hmy_gas_type','hmy_gas_object'],
      data() {
        return {
          // 遮罩层
          loading: true,
          // 选中数组
          ids: [],
          // 非单个禁用
          single: true,
          // 非多个禁用
          multiple: true,
          // 显示搜索条件
          showSearch: true,
          // 总条数
          total: 0,
          // 角色表格数据
          roleList: [],
          // 气体检测仪表格数据
          gasList: [],
          // 弹出层标题
          title: "",
          // 是否显示弹出层
          open: false,
          // 日期范围
          dateRange: [],
          //日期
          currentDate: new Date(),
          // 查询参数
          queryParams: {
            gasBrand:undefined,
            gasModel: undefined,
            gasState:undefined,
            beginTime:undefined,
            endTime:undefined
          },
          // 表单参数
          form: {},
          defaultProps: {
            children: "children",
            label: "label"
          },
        };
      },
      created() {
        this.getList();
      },
      methods: {
        // 表单重置
        reset() {
          this.form = {
            gasId: undefined,
            gasModel: undefined,
            gasBrand: undefined,
            gasType: undefined,
            gasRange: undefined,
            gasObject: undefined,
            gasState: "1",
            remark: undefined
          };
          this.resetForm("form");
        },

        /** 查询气体检测仪列表 */
        getList() {
          this.loading = true;
          /** 查询气体检测仪列表 */
          this.queryParams.beginTime = this.dateRange[0]
          this.queryParams.endTime = this.dateRange[1]
          console.log(this.queryParams)
          listGas(this.queryParams).then(res => {
            this.gasList = res.rows
            console.log(this.gasList)
            this.total = res.total;
            this.loading = false
          });
        },
        /** 修改按钮操作 */
        handleUpdate(gasId) {
          this.reset();
          // const gasId = row.gasId || this.ids
          listGasById(gasId).then(res =>{
            this.form = res.data;
            this.open = true;
            this.title = "修改设备";
          })
        },
        // 取消按钮
        cancel() {
          this.open = false;
          this.reset();
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.dateRange = [];
          this.resetForm("queryForm");
          this.handleQuery();
        },
        /** 提交按钮 */
        submitForm: function() {
          if (this.form.gasId != undefined) {
            console.log(this.form)
            editGas(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addGas(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        },
      },
    }

</script>

<style scoped>
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    float: right;
  }

  .image {
    width: 100%;
    /*height: 100%;*/
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
